<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <view class="content">
      <view class="top">
        <view class="top-box">
          <view>
            <view class="title dispaly-center">
              <view class="ipt">
                <view class="ip-box">
                  <view class="ip-bg">
                    <image src="/static/icon/s.png" mode="aspectFill"/>
                  </view>
                  <view class="input dispaly-center">
                    <view class="s-icon">
                      <image src="/static/image/search.png" mode="aspectFill"/>
                    </view>
                    <input placeholder="搜索" v-model="queryData.search" @confirm="search"/>
                  </view>
                </view>
              </view>
            </view>
            <view class="cate">
              <view class="cate-box">
                <view class="cate-img">
                  <image src="/static/image/sort-bg.png" mode="aspectFill"/>
                </view>
                <view class="sort">
                  <view class="sort-item dispaly-center" v-for="(item, index) in sortList" :key="index" @click="clickSort(item, index)">
                    <view class="s dispaly-center">
<!--                      <view class="s-left over-1" v-if="item.type == 4">{{ gradeName ? gradeName : '年级' }}</view>-->
<!--                      <view class="s-left over-1" v-if="item.type == 5">{{ specialityName ? specialityName : '专业' }}</view>-->
<!--                      <view class="s-left" v-if="item.type != 4 && item.type != 5">{{ item.name }}</view>-->
                      <view class="s-left" >{{ item.name }}</view>
                      <view class="s-right">
                        <image v-if="item.type == 4 || item.type == 5" src="/static/icon/sx.png" mode="aspectFill"/>
                        <image v-else src="/static/image/sort.png" mode="aspectFill"/>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="product" :style="{marginTop: cateHeight + 'px'}">
        <ProductList list-type="2" :data="dataList" v-if="dataList.length"/>
        <LoadMore :status="status"/>
      </view>
    </view>
  </view>
  <view class="s-box" v-if="show" :style="{top: cateHeight + 'px'}">
    <view class="item-box dispaly-just-between">
      <view class="item" v-for="(item, index) in screeningList" :key="index" @click="clickScreening(item, index)">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 " >{{item.name}}</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>
  <up-overlay zIndex="1" :show="show" @click="show = false"></up-overlay>

  <up-picker @confirm="gardConfirm"  @cancel="gardShow= false" cancelColor="#ee003e" confirmColor="#2d68ea" :show="gardShow" :columns="gardCateList" keyName="name" closeOnClickOverlay @close="gardShow = false" ></up-picker>
  <up-picker @confirm="zConfirm" @cancel="zShow= false" cancelColor="#ee003e" confirmColor="#2d68ea" :show="zShow" :columns="zCateList" keyName="name" closeOnClickOverlay @close="zShow = false" ></up-picker>
</template>

<script setup>
import ProductList from "../../components/productList/productList.vue";
import {ref, onMounted, reactive} from 'vue';
import {getProductLit, productCate} from '@/api/apiList';
import {deleteObjectEmptyKey, getElementHeight } from '@/utils/util'
import {onReachBottom, onPullDownRefresh} from "@dcloudio/uni-app";

const show = ref(false)
const sortList = ref([
  {name: '时间', type: 1},
  {name: '价格', type: 2},
  {name: '收藏', type: 3},
  {name: '年级', type: 4},
  {name: '专业', type: 5},
])

const screeningList = ref([
  {name: '年级', 'type': 'class'},
  {name: '专业', 'type': 'zy'}
])

const dataList = ref([])
const queryData = reactive({
  sortName: '',
  sortValue: '',
  search: '',
  categoryId: '',
  pageSize: 10,
  pageNum: 1,
  type: 1,
  grade: '',
  speciality: ''
})
const status = ref('loadmore')
const showPage = ref(true)
const getListData = async () => {
  status.value = 'loading'
  const newQuery = deleteObjectEmptyKey(queryData)
  const res = await getProductLit(newQuery)
  if(res.code == 200) {
    if(res.rows.length) {
      dataList.value = [...dataList.value, ...res.rows]
      status.value = 'loadmore'
    }else {
      status.value = 'nomore'
    }
    showPage.value = false
  }
}


// 点击排序
const clickSort = (item, index) => {
  if(item.type != 4 && item.type != 5) {
    if (item.type === 1) queryData.sortName = 'create_time'
    if (item.type === 2) queryData.sortName = 'price'
    if (item.type === 3) queryData.sortName = 'collect_num'
    if (queryData.sortValue === 'desc') {
      queryData.sortValue = 'asc'
    } else {
      queryData.sortValue = 'desc'
    }
    queryData.pageNum = 1
    dataList.value = []
    getListData()
  }else  {
    if(item.type == 4) gardShow.value = true
    if(item.type == 5) zShow.value = true
  }
}

const search = () => {
  queryData.pageNum = 1
  dataList.value = []
  getListData()
}


// 选择筛选
const screeningItem = ref({})
const clickScreening = (item, index) => {
  screeningItem.value = item
  if(item.type === "class") {
    gardShow.value = true
  }else {
    zShow.value = true
  }
  // queryData.pageNum = 1
  // dataList.value = []
  // getListData()
  show.value = false
}


const gardShow = ref(false)
const gardCateList = ref([])
const getGardCateList = async () => {
  const res = await productCate({type: 1})
  if (res.code == 200) {
    gardCateList.value = [res.data]
  }
}


const zShow = ref(false)
const zCateList = ref([])
const getZCateList = async () => {
  const res = await productCate({type: 2})
  if (res.code == 200) {
    zCateList.value = [res.data]
  }
}

const gradeName = ref('')
const gardConfirm = (data) => {
  queryData.grade = data.value[0].id
  gradeName.value = data.value[0].name
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  gardShow.value = false
}

const specialityName = ref('')
const zConfirm = (data) => {
  queryData.speciality = data.value[0].id
  specialityName.value = data.value[0].name
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  zShow.value = false
}


// 获取元素高度
const cateHeight = ref(0)
onMounted(async () => {
  const res = await getElementHeight('.top')
  cateHeight.value = res
  await getGardCateList()
  await getZCateList()
  await getListData()
})

onReachBottom(() => {
  queryData.pageNum++
  getListData()
})

onPullDownRefresh(() => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  uni.hideLoading()
  uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
$i-height: 68rpx;
$i-width: 692rpx;
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffbf0f;
}

.s-box {
  z-index: 9999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffbf0f;
  padding: 20rpx 0;
  .item-box {
    padding: 18rpx 26rpx 0 26rpx;
    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;
      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }
      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}

.title {
  display: flex;
  justify-content: center;
  .ipt {
    .ip-box {
      position: relative;
      width: $i-width;
      height: $i-height;

      .ip-bg {
        image {
          width: $i-width;
          height: $i-height;
        }
      }

      .input {
        width: $i-width;
        height: $i-height;
        position: absolute;
        top: 0;
        left: 24rpx;

        .s-icon {
          height: $i-height;
          line-height: $i-height;
          padding-top: 5rpx;
          margin-right: 10rpx;

          image {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}

.content {
  .cate {
    padding: 13rpx 22rpx;

    .cate-box {
      position: relative;

      .cate-img {
        image {
          width: 100%;
          height: 78rpx;
        }
      }

      .sort {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 30%;
        right: 20rpx;

        .sort-item:last-child {
          margin-right: 0;
        }

        .sort-item {
          margin-right: 60rpx;

          .s {
            .s-left {
              font-family: IPix;
              font-size: 28rpx;
              color: #4E3B0C;
              margin-right: 10rpx;
            }

            .s-right {
              width: 22rpx;
              height: 30rpx;
              image {
                width: 22rpx;
                height: 30rpx;
              }
            }
          }
        }
      }
    }
  }
}


</style>